import React from 'react'
import styles from './index.less'
import title from './Title.png'
import { E } from '../../../../../constants'
import { useIntl } from 'umi';
function Index() {
  const intl = useIntl();
  const tableCol = ["日期", "时间", "会议内容", "会议地点", "承办方"]
  const list = [
    {
      date: '5月4日',
      data: [
        {
          time: '17:30-21:00',
          content: intl.formatMessage({ id: 'AWARD_PARTY' }),
          address: intl.formatMessage({ id: 'KERRY_HOTEL_PUDONG' }),
          sponsor: intl.formatMessage({ id: 'THE_ORGANIZING_COMMITTEE' }),
        }
      ]
    },
    {
      date: '5月5日',
      data: [
        {
          time: '10:00-12:00',
          content: intl.formatMessage({ id: 'A' }),
          address: intl.formatMessage({ id: 'CREATIVE_STAGE' }),
          sponsor: intl.formatMessage({ id: 'CREATIVE_HUB' }),

        },
        {
          time: '13:00-17:00',
          content: intl.formatMessage({ id: 'SHANDONG' }),
          address: intl.formatMessage({ id: 'M9_CONFERENCE_ROOM' }),
          sponsor: intl.formatMessage({ id: 'SHANDONG_PROVINCE' }),
        },
        {
          time: '14:00-16:00',
          content: intl.formatMessage({ id: 'INTERNATIONAL_PROCUREMENT_FAIR' }),

          address: intl.formatMessage({ id: 'W1_PAVILION_INTERNATIONAL_PROCUREMENT_NEGOTIATION_AREA' }),
          sponsor: intl.formatMessage({ id: 'THE_ORGANIZING_COMMITTEE' }),
        },
        {
          time: '14:00-16:00',
          content: intl.formatMessage({ id: 'RECALL_THE' }),
          address: intl.formatMessage({ id: 'CREATIVE_STAGE' }),
          sponsor: intl.formatMessage({ id: 'ORGANIZING' }),
        }
      ]
    },
    {
      date: '5月6日',
      data: [
        {
          time: '9:00-13:00',
          content: intl.formatMessage({ id: 'SHANDONG' }),
          address: intl.formatMessage({ id: 'M9_CONFERENCE_ROOM' }),
          sponsor: intl.formatMessage({ id: 'SHANDONG_PROVINCE' }),
        },
        {
          time: '9:30-11:30',
          content: intl.formatMessage({ id: 'EXCHANGE_MEETINGS' }),
          address: intl.formatMessage({ id: 'PRESS_CENTRE_CONFERENCE_ROOM' }),
          sponsor: intl.formatMessage({ id: 'SINCE_THE_ASSOCIATION' }),
        },
        {
          time: '9:45-12:00',
          content: intl.formatMessage({ id: 'NORTH_AMERICA_VENUE' }),
          address: intl.formatMessage({ id: 'M34_CONFERENCE_ROOM' }),
          sponsor: intl.formatMessage({ id: 'BAFANG_ELECTRIC' }),
        },
        {
          time: '13:45-16:30',
          content: '八方上海展新产品专题分享会（欧洲场）',
          address: intl.formatMessage({ id: 'M34_CONFERENCE_ROOM' }),
          sponsor: intl.formatMessage({ id: 'BAFANG_ELECTRIC' }),
        },
        {
          time: '10:00-12:00',
          content: intl.formatMessage({ id: 'INTERNATIONAL' }),
          address: intl.formatMessage({ id: 'W1_PAVILION_INTERNATIONAL_PROCUREMENT_NEGOTIATION_AREA' }),
          sponsor: intl.formatMessage({ id: 'THE_ORGANIZING_COMMITTEE' }),
        },
        {
          time: '10:00-12:00',
          content: intl.formatMessage({ id: 'AFTER_THE_EPIDEMIC' }),
          address: intl.formatMessage({ id: 'CREATIVE_STAGE' }),
          sponsor: intl.formatMessage({ id: 'ORGANIZING' }),
        },
        {
          time: '13:30-17:00',
          content: intl.formatMessage({ id: 'SEMINAR_ON_ACCESS' }),
          address: intl.formatMessage({ id: 'M39_CONFERENCE_ROOM' }),
          sponsor: intl.formatMessage({ id: 'TUV' }),
        },
        {
          time: '14:00-16:00',
          content: intl.formatMessage({ id: 'Rock' }),
          address: intl.formatMessage({ id: 'M38_CONFERENCE_ROOM' }),
          sponsor: intl.formatMessage({ id: 'HONGJI_TWO' }),
        },
        {
          time: '14:00-16:00',
          content: intl.formatMessage({ id: 'FEEL_THE_WIND' }),
          address: intl.formatMessage({ id: 'CREATIVE_STAGE' }),
          sponsor: intl.formatMessage({ id: 'CREATIVE_HUB' }),
        },
      ]
    },
    {
      date: '5月7日',
      data: [
        {
          time: '10:00-11:30',
          content: intl.formatMessage({ id: 'WIN' }),
          address: intl.formatMessage({ id: 'CREATIVE_STAGE' }),
          sponsor: '青岛迈金智能科技有限公司'
        }
      ]
    },
  ]
  return (
    <div className={styles.page}>
      {/* <p>
      2021年中国国际自行车展览会
      </p>
      <p>
      会议场次安排一览表
      </p> */}
      <img src={title}></img>
      <div className={styles.tableBox}>
        {/* <table className={styles.table} border="1">
        <tr>
          {
            tableCol.map((item,index)=>{
              return <th key={index}>{item}</th>
            })
          }
        </tr>
        {
          list.map((item)=>{
           return  item.data.map((vo,i)=>{
            return <tr key={i}>
              <td>{item.date}</td>
                {
                  Object.values(vo).map((o,j)=>{
                    return <td key={j}>{o}</td>
                  })
                }
            </tr>   
          })
          console.info();
          })
        }
      </table> */}

        {
          E.meetingList.map((item) => {
            return item.data.map((vo, i) => {
              return <table className={styles.table} border="1" key={i}>
                <tbody>
                  {
                    Object.keys(vo).map((o, index) => {
                      let text = o == 'time' ? `时间` : o == 'content' ? '会议内容' : o == 'address' ? '会议地点' : '承办方'
                      return <tr key={index}>
                        <td>
                          {text}
                        </td>
                        <td >
                          {index == 0 ? `${item.date} ${vo[o]}` : vo[o]}
                        </td>
                      </tr>

                    })
                  }
                </tbody>
              </table>
            })
          })
        }

        <p className={styles.text}>{intl.formatMessage({ id: "ON_SITE" })}</p>
      </div>
    </div>
  )
}

export default Index
